<template>
  <div v-loading="loading">
    <TableSearch
      ref="tableSearch"
      :tableBtns="tableBtns"
      :search-path="searchPath"
      :formItemsInline="formItemsInline"
      :columns="columns"
      :tableData="tableData"
      :form="form"
      @handleTableData="handleTableData"
      @reset="reset"
    >
      <template slot="date">
        <el-form-item>
          <SearchDatePicker
            :start.sync="form.startTime"
            :end.sync="form.endTime"
          />
        </el-form-item>
      </template>
    </TableSearch>
    <PresentTimeCard
      v-if="presentTimeCardVisible"
      :type="presentType"
      :visible.sync="presentTimeCardVisible"
      :card-attr="detailData"
      :api="api"
      :items="presentItems"
      @refreshTable="refreshTable"
    ></PresentTimeCard>
  </div>
</template>
<script>
import TableSearch from '@/components/TableSearch'
import {
  timeCardList,
  exportTimecardPage,
  presentTimeCard,
  selectTimeCardStation,
} from '@/api/order'
import PresentTimeCard from '@/components/PresentTimeCard'

const timeCardType = {
  1: '积分兑换',
  2: '购买',
  3: '赠送',
  4: '活动领取',
  5: '外部活动',
}
export default {
  name: 'OrderTimeCardList',
  components: { TableSearch, PresentTimeCard },
  data() {
    return {
      loading: false,
      presentTimeCardVisible: false,
      presentType: 'normal',
      isBatch: false,
      form: {},
      api: {
        submit: presentTimeCard,
        staId: selectTimeCardStation,
      },
      presentItems: [],
      singlePresent: [
        'mobile',
        'confirmMobile',
        'staId',
        'timeCardType',
        'initialTime',
        'timeCardRule',
        'timeCardExpire',
      ],
      batchPresent: ['staId', 'timeCardRule', 'batchAdd'],
      detailData: {},
      tableData: {},
      columns: [
        {
          label: '券码',
          prop: 'integralId',
          resourceId: '/web/order-management/timecard-order-management/券码',
        },
        {
          label: '订单类型',
          prop: 'type',
          formatter: (item) => {
            return timeCardType[item.type] || ''
          },
          resourceId:
            '/web/order-management/timecard-order-management/订单类型',
        },
        {
          label: '用户手机号',
          prop: 'userMobile',
          resourceId:
            '/web/order-management/timecard-order-management/用户手机号',
        },
        {
          label: '时长卡电站',
          prop: 'stationName',
          resourceId:
            '/web/order-management/timecard-order-management/时长卡电站',
        },
        {
          label: '购买电站',
          prop: 'payStationName',
          resourceId:
            '/web/order-management/timecard-order-management/购买电站',
          formatter: (item) => {
            return item.payStationName ? item.payStationName : '--'
          },
        },
        {
          label: '代理商',
          prop: 'merchantName',
          resourceId: '/web/order-management/timecard-order-management/代理商',
        },
        {
          label: '订单金额(元)',
          prop: 'money',
          resourceId:
            '/web/order-management/timecard-order-management/订单金额',
        },
        {
          label: '剩余时长(分)',
          prop: 'restTime',
          resourceId:
            '/web/order-management/timecard-order-management/剩余时长',
        },
        {
          label: '状态',
          prop: 'status',
          formatter: (item) => {
            if (item.status == 0) {
              return '未绑定'
            } else if (item.status == 1) {
              return '绑定'
            }

            return ''
          },
          resourceId: '/web/order-management/timecard-order-management/状态',
        },
        {
          label: '操作',
          resourceId: '/web/order-management/timecard-order-management/操作',
          buttons: [
            {
              label: '查看详情',
              click: (row) => {
                this.$router.push(
                  `/order/timeCardDetail/order/${row.integralId}`
                )
              },
              resourceId:
                '/web/order-management/timecard-order-management/查看详情',
            },
          ],
        },
      ],
      tableBtns: [
        {
          label: '赠送时长卡',
          click: this.handlePersent,
          icon: 'el-icon-present',
          resourceId:
            '/web/order-management/timecard-order-management/赠送时长卡',
        },
        {
          label: '批量赠送',
          click: this.handlePersentBatch,
          icon: 'el-icon-present',
          resourceId:
            '/web/order-management/timecard-order-management/批量赠送',
        },
        {
          label: '下载批量赠送模板',
          isDownload: true,
          href: require('../../assets/batchTemplate/时长卡批量赠送模板.xlsx'),
          click: this.handleDownload,
          fileName: '时长卡批量赠送模板',
          resourceId:
            '/web/order-management/timecard-order-management/赠送时长卡',
        },
        {
          label: '导出',
          isExport: true,
          startDownload: (callback) => {
            exportTimecardPage({
              ...this.form,
              pageSize: 10,
              currentPage: 1,
            })
              .then((res) => {
                callback(res)
              })
              .catch((err) => {
                console.log(err)
                callback(0)
              })
          },
          resourceId: '/web/order-management/timecard-order-management/导出',
        },
      ],
      searchPath: '/web/order-management/timecard-order-management/查询',
      formItemsInline: [
        {
          placeholder: '请输入用户手机号',
          type: 'text',
          clearable: true,
          value: 'userMobile',
          resourceId:
            '/web/order-management/timecard-order-management/用户手机号',
        },
        {
          placeholder: '请输入代理商',
          type: 'text',
          clearable: true,
          value: 'mchName',
          resourceId: '/web/order-management/timecard-order-management/代理商',
        },
        {
          placeholder: '请输入电站名',
          type: 'text',
          clearable: true,
          value: 'stationName',
          resourceId:
            '/web/order-management/timecard-order-management/时长卡电站',
        },
        {
          placeholder: '订单类型',
          type: 'select',
          options: () => {
            return Object.keys(timeCardType).map((item) => {
              return {
                label: timeCardType[item],
                value: item,
              }
            })
          },
          clearable: true,
          value: 'type',
          resourceId:
            '/web/order-management/timecard-order-management/订单类型',
        },
        {
          slot: 'date',
        },
      ],
    }
  },
  methods: {
    refreshTable() {
      this.$refs.tableSearch.refreshTable()
    },
    handlePersent() {
      this.presentItems = this.singlePresent
      this.presentTimeCardVisible = true
    },
    handlePersentBatch() {
      this.presentItems = this.batchPresent
      this.presentTimeCardVisible = true
    },
    handleTableData(params) {
      this.loading = true
      timeCardList(params)
        .then((res) => {
          this.tableData = {
            list: res.list,
            totalCount: res.totalAmount,
          }
        })
        .catch((err) => {
          console.log(err)
        })
        .finally(() => {
          this.loading = false
        })
    },
    reset() {
      this.form = {}
    },
  },
}
</script>
